<template>
    <!-- <el-dialog title="拆提放行" :visible.sync="dialogForm" width="1100px"> -->
    <div>
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="search-form" label-width="110px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        <select-port v-model="form.portCode" @select="selectPort"
                                     :name="form.portCode"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名/航次：" prop="containerId">
                        <!--<el-input v-model="form.ch"></el-input>-->
                        <auto-ship-voyage :portCode="form.portCode" :name="ch"
                                          @matchRecord="selectShipVoyage"></auto-ship-voyage>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="放行类型：">
                        <el-select v-model="devanType" placeholder="请选择" clearable @change="changeDevanType">
                            <el-option v-for="[key, val] in _dictReleaseType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="选择未放行箱：" prop="containerId">
                        <el-button :disabled="(!portName)||ch===''" @click="handleChange('boxSelect')">选择箱</el-button>
                        <el-button :disabled="(!portName)||ch===''" @click="handleChange('billSelect')">选择提单</el-button>
                        <el-button :disabled="isShowOpen" @click="handleFeeClose()">拆提封航</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="list" border stripe max-height="700" class="mt-10 chaitifangxingTbale">
            <el-table-column type="index" label="序号" fixed="left"  width="55"></el-table-column>
            <el-table-column prop="devanType" label="放行类型"  min-width="130">
                <template slot-scope="scope">
                    {{devanType == 'T' ? '提箱放行' : '拆箱放行' }}
                </template>
            </el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="130"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="120"></el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="140"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="80"></el-table-column>
            <el-table-column prop="isSendCustoms" label="海关放行"  min-width="120"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="120"></el-table-column>
            <el-table-column fixed="right" align="center" label="操作"  width="140">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleRemove(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-form :inline="true" :model="form" class="search-form" label-width="120px" v-if="list.length>0">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="合计：">
                        20*F {{ tf }} --- 40*F {{ ff }}
                    </el-form-item>
                </el-col>
            </el-row>
            <!--<el-row>
                <el-col :span="12">
                    <el-form-item label="结算方式：" prop="accountWay">
                        <el-select v-model="form.accountWay" placeholder="请选择" clearable @change="handleAccountFee">
                            <el-option v-for="[key, val] in _dictSettlementType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结算单位：" prop="accountUnit">
                        <auto-search-custom @selectName="handleAccountUnit"
                                            :name="form.accountUnit" :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="form.accountWay==='C'">
                <el-col :span="24">
                    <el-form-item label="付费金额：">
                        {{ form.accountFee }}
                    </el-form-item>
                </el-col>
            </el-row>-->
        </el-form>
        <el-table :data="feeList" border stripe width="500px" class="mt-10"  v-if="list.length>0">
            <el-table-column prop="name" label="费用名称" min-width="120"></el-table-column>
            <el-table-column prop="way" label="结算方式" min-width="120">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.way" placeholder="请选择" @change="changeRowWay(scope.row)">
                        <el-option v-for="[key, val] in _dictSettlementType" :key="key" :label="val" :value="key">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="金额" min-width="120"></el-table-column>
            <el-table-column prop="unit" label="结算单位"  min-width="120">
                <template slot-scope="scope">
                    <auto-search-custom @selectName="val=>{handleAccountUnit(val,scope.row.line)}" :name="scope.row.unit" :isShipAgent="true"></auto-search-custom>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"  min-width="120">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.remark"></el-input>
                </template>
            </el-table-column>
        </el-table>
        <el-form :inline="true" class="search-form" label-width="120px" v-if="list.length>0" style="margin-top: 15px;">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="付费金额：">
                        <span style="font-size: 15px;">{{ devanType == 'T' ? (Number(feeList[0].money).toFixed(2)) :((Number(feeList[0].money) +  Number(feeList[1].money)).toFixed(2))}}元</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span class="dialog-footer">
            <!-- <el-button @click="dialogForm = false">取 消</el-button> -->
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">确认放行</el-button>
        </span>
        <box-select ref="boxSelect" @select="handleSelect"></box-select>
        <bill-select ref="billSelect" @select="handleSelect"></bill-select>
    </div>
    <!-- </el-dialog> -->
</template>

<script>
    import boxSelect from './feeBoxSelect'
    import billSelect from './feeOrderSelect'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import { sureFeeClose, releaseCount, getCanDevanClose, releaseCountCX} from "@/api/shipPlan/shipPlan";
    import selectPort from '@/components/select/selectPort'
    import autoShipVoyage from '@/components/autocomplete/autoShipVoyage'
    import Sp from "../print/sp";

    export default {
        name: "拆提放行",
        components: {
            Sp,
            boxSelect, billSelect, autoSearchCustom, selectPort, autoShipVoyage
        },
        data() {
            return {
                dialogForm: false,
                selectForm: false,
                form: this.clearForm(),
                rules: {},
                list: [],
                ch: '',
                portName: '',
                isShowOpen:true,
                planNo:'',
                feeList : [
                    {name:'卸船理箱费',way:'M',money:'0',unit:'',remark:'',line:0},
                    {name:'拆箱费用',way:'M',money:'0',unit:'',remark:'',line:1}
                ],
                devanType : 'T',
                nowUnit : '',
                shipCode : ''
            }
        },
        methods: {
            selectPort(val) {
                this.form.shipName = ''
                this.form.voyage = ''
                this.ch = ''
                this.portName = ''
            },
            selectShipVoyage(item) {
                this.ch = `${item.SHIPNAME}/${item.VOYAGE}`
                this.portName = item.PORTNAME
                this.form.shipName = item.SHIPNAME
                this.shipCode = item.SHIPCODE
                this.form.voyage = item.VOYAGE
                this.decideIsShow()
            },
            handleSelect(item) {
                console.log(item)
                this.list.splice(0, this.list.length)
                item.forEach(f => {
                    this.list.push({ ...f, devanType: 'T' })
                })
                if (this.list.length > 0) {
                    this.form.accountUnit = this.list[0].shipAgentName
                    this.feeList.forEach((item, index) => {
                        item.unit = this.list[0].shipAgentName
                    })
                }

                /*this.handleAccountFee()*/
            },
            handleAccountUnit(val,line) {
                if (val) {
                    this.feeList.forEach((item, index) => {
                        this.feeList[line].unit = val
                        this.changeRowWay(item)
                    })
                }

            },
            changeDevanType() {
                if (this.devanType == 'T') {
                    this.feeList = [
                        {name:'卸船理箱费',way:'M',money:'0',unit:'',remark:'',line:0}
                    ]
                } else if (this.devanType == 'C') {
                    this.feeList =[
                        {name:'卸船理箱费',way:'M',money:'0',unit:'',remark:'',line:0},
                        {name:'拆箱费用',way:'M',money:'0',unit:'',remark:'',line:1}
                    ]
                }
                if (this.list.length > 0) {
                    this.feeList.forEach((item, index) => {
                        item.unit = this.list[0].shipAgentName
                    })
                }
            },
            changeRowWay(val) {
                if (val.way === 'C'){
                    let data = []
                    for (let i = 0; i < this.list.length; i++) {
                        const el = this.list[i]
                        data.push({
                            id: el.tallyDetailId,
                            accountUnit: val.unit,
                            accountWay: val.way,
                        })
                    }
                    if (val.name === '卸船理箱费') {
                        releaseCount(data).then(res => {
                            this.feeList[val.line].money = res.data
                        })
                    }
                    if (val.name === '拆箱费用') {
                        releaseCountCX(data).then(res => {
                            this.feeList[val.line].money = res.data
                        })
                    }
                } else {
                    this.feeList[val.line].money = 0
                }

            },
            handleAccountFee() {
                if (this.form.accountWay === 'C') {
                    let data = []
                    for (let i = 0; i < this.list.length; i++) {
                        const el = this.list[i]
                        data.push({
                            id: el.tallyDetailId,
                            accountUnit: this.form.accountUnit,
                            accountWay: this.form.accountWay,
                        })
                    }
                    releaseCount(data).then(res => {
                        this.form.accountFee = res.data
                    })
                }
            },
            handleChange(val) {
                console.log(this.portName)
                console.log(this.ch)
                this.selectForm = true
                this.$refs[val].dialogForm = true;
                this.$nextTick(() => {
                    // this.$refs[val].dialogForm = true
                    this.$refs[val].form['search_EQ_portCode'] = this.form.portCode
                    this.$refs[val].portName = this.portName
                    this.$refs[val].form['search_EQ_shipName'] = this.form.shipName
                    this.$refs[val].form['search_EQ_voyage'] = this.form.voyage
                    this.$refs[val].form['search_EQ_shipCode'] = this.shipCode
                    this.$refs[val].loadData()
                })
            },
            handleRemove(index) {
                this.list.splice(index, 1)
                if(this.list.length>0){
                    this.feeList.forEach((item, index) => {
                        this.changeRowWay(item)
                    })
                }
            },
            handleFeeClose( ){
                sessionStorage.setItem('feeId', this.planNo)
                // this.dialogForm = false
                this.$router.push({ path: '/work/shipPlan/fee', name: '拆提封航' })
            },
            handleSubmit() {
                if (this.list.length === 0) {
                    this.$message({ message: '请先添加数据!', type: 'error' })
                    return
                }
                let devanTypes = []
                for (let i = 0; i < this.list.length; i++) {
                    if (this.devanType == 'T'){
                        devanTypes.push({
                            tallyDetailId: this.list[i].tallyDetailId,
                            devanType: this.devanType,
                            cxRemark :  this.devanType == 'C' ? this.feeList[1].remark : ''
                        })
                    } else {
                        devanTypes.push({
                            tallyDetailId: this.list[i].tallyDetailId,
                            devanType: this.devanType,
                            cxAccountFee : this.devanType == 'C' ? this.feeList[1].money : '',
                            cxRemark :  this.devanType == 'C' ? this.feeList[1].remark : '',
                            cxAccountUnit : this.devanType == 'C' ? this.feeList[1].unit : '',
                            cxAccountWay : this.devanType == 'C' ? this.feeList[1].way : '',
                        })
                    }
                }
                let data = {
                    accountUnit: this.feeList[0].unit,
                    accountWay: this.feeList[0].way,
                    remark : this.feeList[0].remark,
                    devanTypes: devanTypes,
                }
                if (this.feeList[0].way === 'C') {
                    data.accountFee = this.feeList[0].money
                }
                sureFeeClose(data).then(res => {
                    this.$message({ message: '放行成功!', type: 'success' })
                    // this.dialogForm = false
                    this.list = []
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.decideIsShow();
                        }, 500)

                    })
                })

            },
            clearForm() {
                return {
                    portCode: '',
                    shipName: '',
                    voyage: '',
                    accountWay: 'M',
                    accountUnit: '',
                    accountFee: 0,
                }
            },
            decideIsShow(){
                let params = {
                    search_EQ_portCode:this.form.portCode,
                    search_EQ_shipCode:this.shipCode,
                    search_EQ_voyage:this.form.voyage,
                    search_EQ_planType:'XC'
                }
                getCanDevanClose(params).then(res =>{
                    if (res.data.canclose === true){
                        this.isShowOpen = false;
                        this.planNo = res.data.planno
                    }
                })
            }
        },
        computed: {
            // 20*F
            tf() {
                let tf = this.list.filter(f => {
                    return f.ef === 'F' && f.containerSize === '20'
                })
                return tf.length
            },
            // 40*F
            ff() {
                let ff = this.list.filter(f => {
                    return f.ef === 'F' && f.containerSize === '40'
                })
                return ff.length
            },
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$emit('load')
                    this.$parent.feeForm = false
                }
            }
        }
    }
</script>

<style scoped>
.dialog-footer {
    margin-top: 30px;
    display: block;
    text-align: center;
}
</style>